<template>
	<div class="edit-business-wrapper">
		<header>
			<i @click="togoBack">&#8249;</i>
			<p>编辑商家信息</p>
		</header>
		<div class="edit-form">
			<label>商家编号:</label>
			<input v-model="business.businessId" disabled />

			<label>商家密码:</label>
			<input v-model="business.businessPassword" type="password" />

			<label>商家名称:</label>
			<input v-model="business.businessName" />

			<label>商家地址:</label>
			<input v-model="business.businessAddress" />

			<label>商家描述:</label>
			<textarea v-model="business.businessExplain"></textarea>

			<label>商家图片:</label>
			<input v-model="business.businessImg" />

			<label>起送价格:</label>
			<input v-model="business.starPrice" type="number" />

			<label>配送费:</label>
			<input v-model="business.deliveryPrice" type="number" />

			<button @click="updateBusiness">保存修改</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'BusinessEdit',
		data() {
			return {
				businessId: this.$route.query.businessId,
				business: {
					businessId: '',
					businessPassword: '',
					businessName: '',
					businessAddress: '',
					businessExplain: '',
					businessImg: '',
					starPrice: '',
					deliveryPrice: ''
				}
			};
		},
		created() {
			this.$axios.get('Business/BusinessId', {
				params: {
					businessId: this.businessId
				}
			}).then(response => {
				this.business = response.data;
			}).catch(error => {
				console.error(error);
			});
		},
		methods: {
			togoBack() {
				this.$router.go(-1);
			},
			// 更新商家信息
			updateBusiness() {
				this.$axios.put('Business/BusinessId', this.$qs.stringify({
						businessId: this.business.businessId,
						businessPassword: this.business.businessPassword,
						businessName: this.business.businessName,
						businessAddress: this.business.businessAddress,
						businessExplain: this.business.businessExplain,
						businessImg: this.business.businessImg,
						starPrice: this.business.starPrice,
						deliveryPrice: this.business.deliveryPrice
					}))
					.then(response => {
						console.log('PUT request successful, response:', response);
						alert('商家信息保存成功');
						// 清除 sessionStorage 中的商家信息
						sessionStorage.removeItem('business');
						// 跳转回商家管理页面
						this.$router.push('/businessLogin');
					})
					.catch(error => {
						console.error('保存失败:', error);
						alert('保存失败，请重试');
					});
			}
		}
	};
</script>

<style scoped>
	/* 容器样式 */
	.edit-business-wrapper {
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
	}

	/* header部分 */
	.edit-business-wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097ff;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		padding-left: 2vw;
	}

	.edit-business-wrapper header i {
		font-size: 10vw;
		user-select: none;
		cursor: pointer;
	}

	.edit-business-wrapper header p {
		margin-left: 35vw;
	}

	/* 表单部分 */
	.edit-form {
		margin-top: 14vw;
		padding: 4vw;
		display: flex;
		flex-direction: column;
	}

	.edit-form label {
		font-size: 4vw;
		color: #333;
		margin-bottom: 2vw;
	}

	.edit-form input,
	.edit-form textarea {
		width: 100%;
		padding: 3vw;
		margin-bottom: 4vw;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 4vw;
		box-sizing: border-box;
	}

	.edit-form input:focus,
	.edit-form textarea:focus {
		border-color: #0097ff;
		outline: none;
	}

	/* 输入框样式 */
	.edit-form input[type="number"] {
		-webkit-appearance: none;
		-moz-appearance: textfield;
	}

	/* 提交按钮 */
	.edit-form button {
		width: 100%;
		padding: 3vw;
		background-color: #0097ff;
		color: white;
		font-size: 4.5vw;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		text-align: center;
	}

	.edit-form button:hover {
		background-color: #007acc;
	}

	/* 适配移动端 */
	@media (max-width: 768px) {
		.edit-form label {
			font-size: 5vw;
		}

		.edit-form input,
		.edit-form textarea {
			font-size: 5vw;
			padding: 4vw;
		}

		.edit-form button {
			font-size: 5vw;
			padding: 4vw;
		}
	}
</style>